Design for Black and White First (HI Guide)

Inside Macintosh: Macintosh Human Interface Guidelines / Part 2 - The Interface Elements: Chapter 9 - Color / Color Application Guidelines

Design for Black and White First

Always design for black and white first and then colorize that design. This method ensures that your design looks good on all Macintosh computers. One example of why this is important is the text selection mechanism. On a color monitor you might be tempted to change the color of text to indicate that it has been selected; however, this technique wouldn't translate to a black-and-white monitor. In addition, people with color-deficient vision wouldn't recognize the use of color to indicate selection. Therefore, you shouldn't use color as the only means of communicating important information. Color should be used redundantly. It shouldn't be the only thing that distinguishes two objects; there should be other cues, such as text labels, shape, location, pattern, or sound.

Figure 9-4 shows the correct process of designing for black-and-white monitors and then adding color to those designs. It demonstrates the consistency of the appearance of the icons and how the aesthetic integrity
is maintained across the designs.

Figure 9-4 Design for black-and-white monitors first

Keep black-and-white designs two-dimensional. It's important to maintain the visual consistency of the Macintosh interface across applications and computer systems. Don't cause unnecessary visual clutter by trying to mimic color effects, such as shadows, in black-and-white designs. Figure 9-5
shows what can happen to black-and-white icons when you try to mimic color effects.

Figure 9-5 Don't mimic color effects in black-and-white designs

Maintain a close visual relationship between a black-and-white design and its colorized version. Users should be able to easily recognize standard interface elements and icons across all monitor types. Users can have several monitors connected to a computer and several computers on which they use your applications. Your application should look consistent when a user changes the bit depth of a monitor or moves your icon or window from a color monitor to a black-and-white monitor.